<script setup lang="ts">
import DefaultSection from '../components/default-section.vue'
import { getImgSrc } from '@/views/product/reno14-pro/image/5/img-src'
import { useGsapContext } from '@/hooks'
import { inject, useTemplateRef } from 'vue'
import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import { navBarHeightKey } from '@/views/product/reno14-pro/symbol-key.ts'
import { useScrollGroup } from '@/hooks/reno14-pro.ts'

const navBarHeight = inject(navBarHeightKey)
const { scrollGroup } = useScrollGroup()

const containerRef = useTemplateRef<HTMLImageElement | null>('containerRef')

useGsapContext(() => {
  if (!containerRef.value) {
    return
  }

  const defaultScrollTrigger: ScrollTrigger.StaticVars = {
    start: () => {
      const viewportWidth = window.innerWidth
      if (viewportWidth < 640) {
        return 'top bottom'
      } else {
        return `top center`
      }
    },
    end: () => {
      return `bottom top+=${navBarHeight?.value ?? 0}`
    },
    scrub: true,
    invalidateOnRefresh: true,
    ...scrollGroup,
  }

  sectionData.forEach((item) => {
    const section = containerRef.value?.querySelector(
      `div[data-section="${item.key}"]`,
    ) as HTMLDivElement | null
    if (!section) {
      return
    }
    const img = section.querySelector('& > img') as HTMLImageElement | null
    if (img) {
      gsap.fromTo(
        img,
        {
          yPercent: -20,
        },
        {
          yPercent: 0,
          scrollTrigger: {
            ...defaultScrollTrigger,
            trigger: section,
          },
        },
      )
    }
  })
})

const sectionData = [
  {
    key: '2',
    title: '80W 超级闪充',
    subtitle: '秒速回血，持久畅玩。',
    coverSrc: getImgSrc('images-battery-1-mo-1-95.png.webp'),
  },
  {
    key: '3',
    title: '50W 无线闪充',
    subtitle: '轻轻一放，满电来袭。',
    coverSrc: getImgSrc('images-battery-2-mo-1-95.png.webp'),
  },
] as const

const section1Cover = {
  mo: getImgSrc('images-battery-0-mo-1.png.webp'),
  pad: getImgSrc('images-battery-0-mo-1.png.webp'),
  pc: getImgSrc('images-battery-0-mo-1.png.webp'),
}
</script>

<template>
  <div
    ref="containerRef"
    class="py-[3.5rem] bg-[#f6f6f6] pc-container-content-1312-grid lg:py-[clamp(3.5rem,0.5rem+4.6875vw,5rem)]"
  >
    <div class="middle-content">
      <div class="grid gap-[0.25rem] lg:gap-y-[clamp(0.25rem,-0.25rem+0.7813vw,0.5rem)]">
        <DefaultSection
          :title="['6200mAh', '长寿耐用大电池', '超级闪充 即刻满血']"
          desc="升级 Reno 史上最大电池，即刻拉满能量槽。持久使用电池依旧耐用，安心用放肆玩。"
          :cover-src="section1Cover"
        />

        <div
          class="sm:grid sm:grid-cols-2 sm:grid-rows-1 sm:gap-x-[0.25rem] lg:gap-x-[clamp(0.25rem,-0.25rem+0.7813vw,0.5rem)]"
        >
          <div
            v-for="(i, key) in sectionData"
            :key
            :data-section="i.key"
            class="relative w-full aspect-[383/350] overflow-hidden _rounded max-sm:last:mt-[0.25rem] sm:aspect-[164/145]"
          >
            <img class="w-full h-[130%]" :src="i.coverSrc" alt="" />

            <div
              class="absolute top-0 w-full h-full"
              style="
                background: linear-gradient(
                  180deg,
                  rgba(0, 0, 0, 0) 65.46%,
                  rgba(0, 0, 0, 0.8) 99.95%
                );
              "
            ></div>

            <div
              class="absolute bottom-[10%] mx-[1.125rem] text-white lg:mx-[clamp(1.125rem,-2.875rem+6.25vw,3.125rem)]"
            >
              <p class="text-lg lg:text-[clamp(1.125rem,0.375rem+1.1719vw,1.5rem)]">
                {{ i.title }}
              </p>
              <p
                class="text-xs opacity-75 lg:text-[clamp(0.75rem,0rem+1.1719vw,1.125rem)] 2xl:mt-[0.25rem]"
              >
                {{ i.subtitle }}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
